<template>
  <div class="filed-group" @legend.capture="onLegendAppend" style="display: flex;">
    <Tabs v-if="!props.hideNavBar&&legends.length>0" :datas="legends"
          class-name="h-tabs-fieldset"
          v-model="selected"
          @change="legendChange">
      <template #item="{ tab }">
        <Icon v-if="tab.icon" :type="tab.icon" />
        <Space />
        <span>{{ tab.title }}</span>
      </template>
    </Tabs>
    <div style="height: 100%;flex: 1;overflow: hidden;">
      <div style="height: 100%;overflow-y: auto;scroll-behavior: smooth" @scroll="onScroll">
        <slot />
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import {util} from 'framework'

const props=defineProps({
  hideNavBar:{
    type:Boolean
  }
})

const legends=ref([]),selected=ref()
//设置一个flag,防止点击侧面导航时，内容滚动触发滚动的监听处理过程
let changeFlag=false
function legendChange(v){
  changeFlag=true
 v.el.scrollIntoView()
}

function onLegendAppend({detail}){
  if(selected.value==null){
    selected.value=detail.key
  }
  legends.value.push(detail)
}

const onScroll=util.debounce((e)=>{
  if(changeFlag){
    changeFlag=false
    return;
  }
  let top=e.target.scrollTop
  if(legends.value.length==0){
    return;
  }
  let select=legends.value[0]
  for(let v of legends.value){
      if(v.el.offsetTop<top+100){
        select=v
      }else{
        break;
      }
  }
  selected.value=select.key
},100)
</script>

<style lang="less">
.h-tabs-fieldset {
  border-right:1px solid rgba(0,21,41,.08);
  > .h-tabs-item {
    display: block;
    padding: 12px 16px;
    line-height: 1;
    font-size: 15px;
    &:hover {
      color: var(--pc);
    }
    &.h-tabs-selected {
      color: var(--white-color,white);
      background-color: var(--pc);
    }
  }
}
</style>
